<template>
    <button>普通按钮</button>

    <hr>
  背景色：<input v-model="btnTheme.backColor" type="color">
  文本色：<input v-model="btnTheme.textColor" type="color">
</template>

<script>
export default {
    data: () => ({
        btnTheme: {
            backColor: '#000000', // 背景色
            textColor: '#FFFFFF' // 文本色
        }
    })
}
</script>

<script setup>
import {reactive} from 'vue';

let btnTheme = reactive({ // 按钮主题
    backColor: '#000000', // 背景色
    textColor: '#FFFFFF' // 文本色
})
</script>

<style scoped>
button {
    /* 使用 v-bind() 可以使用该组件的中数据源，如果绑定的数据源值发生变化，则样式也会随着更新 */
    background-color: v-bind('btnTheme.backColor');
    color: v-bind('btnTheme.textColor');
}
</style>